<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 
    关于VueComponent:
      1,school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

      2.我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象，
              即Vue帮我们执行的：new VueComponent(options)。

      3.特别注意：每次调用Vue.extend,返回的都是一个全新的VueComponent!！!!

      4.关于this指向：
          (1).组件配置中：
                data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
          (2).new Vue(options)配置中：
                data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

        5.VueComponent的实例对象，以后简称vc(也可称之为：组件实例对象)。
          Vue的实例对象，以后简称vm。
   -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <school></school>
    <hello></hello>
  </div>
</body>

<script type="text/javascript">

  //定义school组件
  const school = Vue.extend({
    name: 'school',
    template: `
      <div>
         <h2>学校名称：{{name}}</h2>
         <h2>学校地址：{{address}}</h2>
        </div>
     `,
    data() {
      return {
        name: '尚硅谷',
        address: '深圳',
      }
    },
  })

  //定义hello组件
  const hello = Vue.extend({
    name: 'hello',
    template: `
         <h2>{{msg}}</h2>
     `,
    data() {
      return {
        msg: '你好啊'
      }
    },
  })

  console.log('@', school);
  console.log('#', hello);

  //创建vm
  new Vue({
    el: '#root',
    components: { school, hello }
  })
</script>

</html>